<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="userRegister"
    @ok="confirmSubmit"
    @close="drawerReset"
    width="720"
    title="用户详情"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="user-drawer">
      <div class="drawer-detial">
        <div class="detial-box">
          <div class="box-label">用户手机号</div>
          <div class="box-value">
            {{ drawerInfo.record.phoneNumber || '--' }}
          </div>
        </div>
        <div class="detial-box">
          <div class="box-label">姓名</div>
          <div class="box-value">{{ drawerInfo.record.userName || '--' }}</div>
        </div>
        <div class="detial-box">
          <div class="box-label">关联企业名称</div>
          <div class="box-value">{{ drawerInfo.record.enterpriseName || '--' }}</div>
        </div>
        <div class="detial-box">
          <div class="box-label">关联企业税号</div>
          <div class="box-value">{{ drawerInfo.record.taxNo || '--' }}</div>
        </div>
        <div class="detial-box">
          <div class="box-label">计费类型</div>
          <div class="box-value" v-if="drawerInfo.record.chargeType == 'CYCLE'">周期计费</div>
          <div class="box-value" v-else-if="drawerInfo.record.chargeType == 'SCORE'">次数计费</div>
          <div class="box-value" v-else>--</div>
        </div>
        <div class="detial-box">
          <div class="box-label">付费类型</div>
          <div class="box-value" v-if="drawerInfo.record.payFlag == '0'">免费</div>
          <div class="box-value" v-else-if="drawerInfo.record.payFlag == '1'">付费</div>
          <div class="box-value" v-else>--</div>
        </div>
        <div class="detial-box" v-if="drawerInfo.record.endDate">
          <div class="box-label">有效期止</div>
          <div class="box-value">{{ drawerInfo.record.endDate || '--' }}</div>
        </div>
        <div class="detial-box" v-else>
          <div class="box-label">剩余Pai豆</div>
          <div class="box-value">{{ drawerInfo.record.balanceScore || '--' }}</div>
        </div>
        <div class="detial-box">
          <div class="box-label">所属渠道</div>
          <div class="box-value">{{ drawerInfo.record.channelName || '--' }}</div>
        </div>
      </div>
      <div class="drawer-area">
        <div class="area-label">备注</div>
        <a-textarea
          allowClear
          :maxLength="100"
          :autoSize="{ minRows: 4, maxRows: 4 }"
          placeholder="请输入备注"
          v-model:value.trim="drawerInfo.textareaValue"
        >
        </a-textarea>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { message } from 'ant-design-vue'
import { InfoCircleOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
import api from '@/api'

const { updateUserMark } = api

const emit = defineEmits(['operateSuccess', 'register'])

const drawerInfo = reactive<any>({
  record: {},
  textareaValue: ''
})

const [userRegister, { closeDrawer, changeOkLoading }] = useDrawerInner(async (data: any) => {
  let record = cloneDeep(data.record)
  drawerInfo.textareaValue = record.userMark || ''
  drawerInfo.record = record
})

const drawerReset = () => {
  changeOkLoading(false)
  drawerInfo.record = {}
  drawerInfo.textareaValue = ''
}

// 提交数据
const confirmSubmit = async () => {
  try {
    changeOkLoading(true)
    await updateUserMark({
      userId: drawerInfo.record.userId,
      userMark: drawerInfo.textareaValue
    })
    message.success('备注编辑成功')
    closeDrawer()
    drawerReset()
    emit('operateSuccess')
    changeOkLoading(false)
  } catch (error) {
    changeOkLoading(false)
  }
}
</script>

<style lang="less" scoped>
.user-drawer {
  padding: 8px 56px 8px 32px;
  .drawer-detial {
    display: flex;
    flex-wrap: wrap;
    .detial-box {
      width: 50%;
      margin-bottom: 24px;
      display: flex;
      line-height: 22px;
      .box-label {
        width: 100px;
        text-align: right;
        flex-shrink: 0;
        font-weight: 600;
        font-size: 12px;
        color: #192236;
        margin-right: 6px;
      }
      .box-value {
        flex: 1;
        font-weight: 500;
        font-size: 14px;
        color: #192235;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
  }
  .drawer-area {
    display: flex;
    .area-label {
      width: 100px;
      text-align: right;
      flex-shrink: 0;
      font-weight: 600;
      font-size: 12px;
      color: #192236;
      margin-right: 6px;
    }
  }
}
</style>
